<template>
<section class="page-demo">
  <div v-for="group in navs">
    <div class="page-title" v-text="group.title"></div>
    <router-link v-for="item in group.list" :to="item.path">
      <div class="link">
        <span>{{ item.name }}</span>
      </div>
    </router-link>
  </div>
</section>
</template>

<style scoped>
.page-demo {
  padding-bottom: 50px;
  padding-left: 20px;
  padding-right: 20px;
  .link {
    background-color: #08f;
    padding: 5px;
    color: #fff;
  }
}

@component-namespace page {
  @component title {
    font-size: 20px;
    margin: 20px auto;
    text-align: center;
    display: block;
    line-height: 1;
  }
  @component part {
    margin-bottom: 15px;
  }
}
</style>

<script type="text/babel">
import {
  navs
} from './route';

export default {
  data() {
    return {
      navs: []
    };
  },

  created() {
    console.log(navs);
    this.navs = navs;
  }
};
</script>
